<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/style.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-tab-title {
            border: none;
        }

        .layui-tab-title .layui-this:after {
            border: none;
        }

        .layui-tab-title {
            height: 30px;
        }

        .layui-tab-title li {
            line-height: 30px;
        }
    </style>
</head>

<body>

<div class="x-body">
    <form action="" method="post" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                客户姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline  kk">
                <input name="identity" type="radio" value="0" title="家长">
                <input name="identity" type="radio" value="1" title="学生">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="qdlx" class="layui-form-label">
                渠道类型
            </label>
            <div class="layui-input-inline">
                <select id="qdlx" name="qdlx" class="valid" onchange="move()" lay-filter="province">
                    <option value=""></option>
                    <option value="seo">SEO网站</option>
                    <option value="xmt">新媒体</option>
                    <option value="ds">电商</option>
                    <option value="tyhz">同业合作</option>
                    <option value="ggjj">广告竞价</option>
                    <option value="gr">个人</option>
                    <option value="qt">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item downBox none">
            <label for="auto-select" class="layui-form-label label-auto">

            </label>
            <div class="layui-input-inline label-down">
                <select id="auto-select" name="shipping" class="valid iii">

                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="dq" class="layui-form-label">
               所在地区
            </label>
            <div class="layui-input-inline">
                <select id="Province" name="shipping" class="valid">
                    <option value="shentong">请选择</option>
                    <option value="shentong">广西</option>
                    <option value="shunfeng">广东</option>
                    <option value="shunfeng">浙江</option>
                    <option value="shunfeng">新疆</option>
                    <option value="shunfeng">湖北</option>
                    <option value="shunfeng">湖南</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select id="City" name="shipping" class="valid">
                    <option value="shentong">请选择</option>
                    <option value="shentong">常熟</option>
                    <option value="shunfeng">南京</option>
                    <option value="shunfeng">徐州</option>
                    <option value="shunfeng">无锡</option>
                    <option value="shunfeng">连云港</option>
                    <option value="shunfeng">西安</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select id="region" name="shipping" class="valid">
                    <option value="shentong">请选择</option>
                    <option value="shentong">浦口</option>
                    <option value="shunfeng">建邺</option>
                    <option value="shunfeng">下关</option>
                    <option value="shunfeng">白下</option>
                    <option value="shunfeng">江宁</option>
                    <option value="shunfeng">鼓楼</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                客户意向
            </label>
            <div class="layui-input-block purpose1">
                <input  name="idea" type="radio" value="0" title="留学">
            </div>
            <div class="layui-input-block purpose2">
                <input name="idea" type="radio" value="1" title="语培">
            </div>
            <div class="layui-input-block purpose3">
                <input name="idea" type="radio" value="2" title="不定">
            </div>
        </div>
        <div class="layui-form-item purposedown1 none">
            <label for="yxDown" class="layui-form-label">
                留学
            </label>
            <div class="layui-input-inline yx1">
                <select id="yxDown" name="shipping" class="valid" lay-filter="yxDown">
                    <option value="shentong">美国</option>
                    <option value="shentong">英国</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item purposedown2 none">
            <label for="yxDown" class="layui-form-label">
                语培
            </label>
            <div class="layui-input-inline yx1">
                <select id="yxDown" name="shipping" class="valid" lay-filter="yxDown">
                    <option value="shentong">英语</option>
                    <option value="shentong">日语</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                成单机会
            </label>
            <div class="layui-input-inline">
                <div class="roleStar">
                    <img src="images/star.png" alt="">
                    <img src="images/star.png" alt="">
                    <img src="images/star.png" alt="">
                    <img src="images/star.png" alt="">
                    <img src="images/star.png" alt="">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                联系方式
            </label>
            <div class=" phone-tab-box ">
                <div class=" phone-tab">
                    <ul>
                        <li>学生</li>
                        <li>家长</li>
                    </ul>

                    <div class="phone-tab-content  ptc1" style="height: 100px;">
                        <div class="zhl-show">
                            <div class="layui-form-item ">
                                <label for="name" class="layui-form-label">
                                    手机
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item  sj1">
                                <label for="name" class="layui-form-label">
                                    QQ
                                </label>
                                <div class="layui-input-inline left">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label for="name" class="layui-form-label">
                                    微信
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item  sj2">
                                <label for="name" class="layui-form-label">
                                    邮箱
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="phone-tab-content  ptc2" style="height: 100px;">
                        <div class="zhl-show">
                            <div class="layui-form-item ">
                                <label for="name" class="layui-form-label">
                                    手机
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item  sj1">
                                <label for="name" class="layui-form-label">
                                    QQ
                                </label>
                                <div class="layui-input-inline left">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label for="name" class="layui-form-label">
                                    微信
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item  sj2">
                                <label for="name" class="layui-form-label">
                                    邮箱
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="name" name="name" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">
                    备注
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn center" lay-submit="" lay-filter="add">增加</button>
            </div>
        </div>
    </form>
</div>
<script>
    //    语培弹窗
    $(".purpose1").on("click",function () {
        $(".purposedown1").show();
        $(".purposedown2").hide();
    })
    $(".purpose2").on("click",function () {
        $(".purposedown2").show();
        $(".purposedown1").hide();
    })
    $(".purpose3").on("click",function () {
        $(".purposedown2").hide();
        $(".purposedown1").hide();
    })
</script>
<script>

    $(function () {
        $(".phone-tab>ul>li").eq(0).css("background", "#CCCCCC");
        $(".phone-tab>ul>li").eq(0).click(function () {
            $(".phone-tab>ul>li").css("background", "#e2e2e2");
            $(this).css("background", "#CCCCCC");
            $(".ptc1").show();
            $(".ptc2").hide();
        })
        $(".phone-tab>ul>li").eq(1).click(function () {
            $(".phone-tab>ul>li").css("background", "#e2e2e2");
            $(this).css("background", "#CCCCCC");
            $(".ptc2").show();
            $(".ptc1").hide();
        })

    })
    //      星星评分
    $(".roleStar>img").click(function () {
        $(".roleStar>img").attr("src", "images/star.png");
        var a = $(this).index();//星星的分数
        for (var i = 0; i <= a; i++) {
            $(".roleStar>img").eq(i).attr("src", "images/starfull.png");
        }
    })
</script>
<script>

    //    下拉框
    //监听。这是文档里的方法，平常js无法操作select
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        form.on('select(province)', function (data) {
//            console.log(data.elem); //得到select原始DOM对象
//            console.log(data.value); //得到被选中的值
            var sec = data.value;
            $(".downBox").show();
            var add;//联动select的数组
            if (sec == "seo") {
                labelshow();
                add = new Array("www.aeis.kewo.com", "www.jipttese.com.cn");
                $(".label-auto").html("SEO网站");
            } else if (sec == "xmt") {
                add = null;
                $(".label-down").hide();
                $(".label-auto").hide();
            } else if (sec == "ds") {
                labelshow();
                add = new Array("淘宝");
                $(".label-auto").html("渠道类型");
            } else if (sec == "tyhz") {
                labelshow();
                $(".label-auto").html("合作机构");
                add = new Array("南京星课教育科技有限公司", "南京课窝教育科技有限公司");
            } else if (sec == "ggjj") {
                labelshow();
                $(".label-auto").html("平台");
                add = new Array("一点资讯", "教育宝");
            } else if (sec == "gr") {
                labelshow();
                add = null;
                $(".label-auto").html("姓名");
                $(".label-down").hide();
                appenddown()
            } else if (sec == "qt") {
                labelshow();
                add = null;
                $(".label-auto").html("请输入");
                $(".label-down").hide();
                appenddown();
            }

            function labelshow() {
                //因为不能直接删除节点，只能让联动的dom隐藏
                $(".label-down").show();
                $(".label-auto").show();
                $(".alonelabel").remove();
            }

            function appenddown() {
//                增加新的input，无法直接替换类型
                $(".downBox").append(" <div class=\"layui-input-inline alonelabel\">\n" +
                    "                <input type=\"text\" id=\"name\" name=\"name\" required=\"\" lay-verify=\"required\"\n" +
                    "                       autocomplete=\"off\" class=\"layui-input\">\n" +
                    "            </div>")
            };

//联动效果的实现
            if (add != null) {
                $("#auto-select").length = 0;
                $("#auto-select>option").remove();
                for (var i = 0; i < add.length; i++) {
                    var ss = new Option();
                    ss.text = add[i].split()[0];
                    $("#auto-select").append(ss);
//                    $("#yxDown").append(ss);
                    form.render('select');
                }
            }


        });
    });


</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>